<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>SmartShop</title>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
	<meta name="author" content="" />

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="styles/skeleton.css" />
    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/inner.css" />
    <link rel="stylesheet" href="styles/color.css" />
	<link rel="stylesheet" href="styles/layout.css" />
    
	<link href='../../fonts.googleapis.com/css@family=Droid+Sans_3A400,700' rel='stylesheet' type='text/css'>
	<!--[if lt IE 9]>
		<script src="../../html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Demo Switcher
	================================================== -->
    <link id="layoutcss" href="styles/fixed-layout.css" rel="stylesheet" type="text/css" />
    <link href="styles/style-switcher.css" rel="stylesheet" type="text/css" />

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />

</head>


<body>
<div id="bodychild">
	<div id="outercontainer">
    
        <!-- HEADER -->
        <div id="outerheader">
        	<div class="container">
			<header id="top" class="twelve columns">
            	<div id="logo"  class="three columns alpha"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
                <div id="headerright" class="six columns omega">
					<div id="chart">
                    	<a href="#" id="shop-bag"></a>
                        <ul class="shop-box">
                        	<li>
                                <img src="images/content/product/small.jpg" alt="" class="alignright imgborder" />
                                <h2>Smart Strip Armchair</h2>
                                <div class="price">1 x $120</div>
                            </li>
                            <li>
                                <div class="total">Subtotal: $120</div>
                                <a href="#" class="button">View Cart</a> <a href="#" class="button">Checkout</a>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    	
                    	<h6>Shopping Cart</h6>
                        <p>You have no items in your shopping cart</p>
                    </div>
					<ul id="user-nav">
                    	<li><a href="account.html">My Account</a></li>
                        <li><a href="login.html">My Wishlist</a></li>
                        <li><a href="cart.html">My Cart</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                        <li><a href="login.html">Login</a></li>
                    </ul>
                </div>

                <section id="navigation" class="twelve columns">
                    <nav id="nav-wrap">
                        <ul id="topnav" class="sf-menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a>
                            	<ul>
                                	<li><a href="element.html">Elements</a></li>
                                    <li><a href="single.html">Blog Details</a></li>
                                    <li><a href="sidebar-left.html">Sidebar Left</a></li>
                                    <li><a href="#">Dropdown</a>
                                        <ul>
                                            <li><a href="#">Only</a></li>
                                            <li><a href="single.html">Example of</a></li>
                                            <li><a href="#">The Dropdown</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="current"><a href="products.html">Products</a>
                            	<ul>
                                	<li><a href="products.html">Category</a></li>
                                    <li><a href="product-details.html">Product Details</a></li>
                                    <li><a href="account.html">My Account</a></li>
                                    <li><a href="cart.html">My Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="login.html">Login</a></li>
                                </ul>
                            </li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul><!-- topnav -->
                    </nav><!-- nav -->	
                    
                    <form method="get" id="searchform" action="#">
                      <div class="bgsearch">
                          <input type="text" name="s" id="s" value="" /> 
                          <input type="submit" class="searchbutton" value="" />
                      </div>
                    </form>
                   
                    <div class="clear"></div>
                </section>
                <div class="clear"></div>
            </header>
            </div>
        </div>
        <!-- END HEADER -->

        <!-- BEFORE CONTENT -->
        <div id="outerbeforecontent">
        	<div class="container">
                <section id="beforecontent" class="twelve columns">
                    <h1 class="pagetitle">Smart Camera SLR</h1>
                    <div class="clear"></div>
                </section>
            </div>
        </div>
        <!-- END BEFORE CONTENT -->
        
        <!-- MAIN CONTENT -->
        <div id="outermain">
        	<div class="container">
			<section id="maincontent" class="twelve columns">
				<section id="content" class="positionleft nine columns alpha"> 
                	<div class="padcontent product-detail">
                    	<div class="four columns alpha">
                       		<img src="images/content/product/img5.jpg" alt="" class="imgborder scale-with-grid" />
                        </div>
                        <div class="one_half lastcols">
                            
                            <div class="price">$140.00</div>
                            <p>Donec consectetur libero ut tortor condimentum eu egestas est viverra. Sed eget turpis dui, sed auctor nisi. Fusce suscipit risus sed tortor mattis sollicitudin. </p>
                            <div class="variations_button">
                            	<form class="variations_form cart" method="post" action="cart.html">
                                    <div class="quantity buttons_added">
                                    <input type="button" class="minus" id="minus1" value="-">
                                    <input maxlength="12" class="input-text qty text" title="Qty" size="4" value="1" name="quantity">
                                    <input type="button" class="plus" id="add1" value="+">
                                    </div>	
                                    <button class="button alt" type="submit">Add to cart</button>	
                                </form>			
                    
								<div class="product_meta"> 
                                	<span class="posted_in">Category: <a href="products.html">Electronic</a>, <a href="products.html">Camera</a></span>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div><br><br>

						<div class="tabcontainer">
                            <ul class="tabs">
                                <li><a href="#tab0">Description</a></li>
                                <li><a href="#tab1">Additional Information</a></li>
                                <li><a href="#tab2">Reviews (0)</a></li>
                            </ul>
                            <div id="tab-body">
                                <div id="tab0" class="tab-content">
                                <p>Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Sed placerat libero quis metus malesuada venenatis. Nulla facilisi malesuada.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam.</p>
                                </div>
                                <div id="tab1" class="tab-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Fusce laoreet neque ut purus faucibus ut condimentum purus condimentum. Vestibulum vel magna ligula, in tincidunt augue. Fusce sit amet neque ut neque vestibulum rhoncus in eu nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer interdum sapien facilisis odio fermentum tincidunt. Nullam a ante augue.</p>
                                </div>
                                <div id="tab2" class="tab-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Morbi nec magna erat, id tincidunt sapien. Morbi id porttitor lorem. In mi velit, viverra a congue et, congue sit amet nibh. Pellentesque a libero eget quam consequat condimentum eu eu est. Vestibulum at tellus eget massa accumsan volutpat. Suspendisse felis arcu, sagittis nec ultrices sit amet, faucibus a ante. Nunc et ante at ipsum iaculis porta eu quis augue. Praesent ultrices suscipit quam, vitae malesuada erat volutpat non. Sed ut tortor turpis, eu dignissim elit.</p>
                                </div>
                            </div>
                        </div>
                             
                        <div class="separator line"></div>
                        
                        <h3>Related Product</h3> 
                        <div class="one_third firstcols">
                            <a href="product-details.html"><img src="images/content/product/img1.jpg" alt="" class="scale-with-grid imgborder" /></a>
                            <h4><a href="product-details.html">Smart Table</a></h4>
                            <div class="price">$175.00</div>
                        </div> 
                        <div class="one_third">
                            <a href="product-details.html"><img src="images/content/product/img2.jpg" alt="" class="scale-with-grid imgborder" /></a>
                            <h4><a href="product-details.html">Smart Chair</a></h4>
                            <div class="price">$175.00</div>  
                        </div> 
                        <div class="one_third lastcols">
                            <a href="product-details.html"><img src="images/content/product/img3.jpg" alt="" class="scale-with-grid imgborder" /></a>
                            <h4><a href="product-details.html">Smart Desk Lamp</a></h4>
                            <div class="price">$175.00</div>
                        </div>            
                	</div>
                </section>
                <aside id="sidebar" class="positionright three columns omega">
                    <ul>
                         <li class="widget-container">
                            <h2 class="widget-title">Categories</h2>
                            <ul>
                                <li><a href="#">Limited Edition</a><span>15</span></li>
                                <li><a href="#">On Sale</a><span>27</span></li>
                                <li><a href="#">New Product</a><span>10</span></li>
                                <li><a href="#">Furniture</a><span>23</span></li>
                                <li><a href="#">Electronic</a><span>25</span></li>
                                <li><a href="#">Other</a><span>70</span></li>
                            </ul>
                        </li>
                        <li class="widget-container">
                            <div class="textwidget"><img src="images/content/banner.gif" alt="" class="scale-with-grid"/></div>
                        </li>
                        <li class="widget-container">
                            <h2 class="widget-title">Top Rated Product</h2>
                            <ul class="lp-widget">
                                <li>
                                    <img src="images/content/product/small-img1.jpg" alt="" class="alignleft imgborder" />
                                    <h3><a href="product-details.html">Smart Strip Armchair</a></h3>
                                    <div class="price">$120.00</div>
                                    <div class="star">
                                        <img src="images/content/star.png" alt=""/>
                                        <img src="images/content/star.png" alt="" />
                                        <img src="images/content/star.png" alt="" />
                                    </div>
                                    <div class="clear"></div>
                                </li>
                                <li>
                                    <img src="images/content/product/small-img2.jpg" alt="" class="alignleft imgborder" />
                                    <h3><a href="product-details.html">Smart Chair</a></h3>
                                    <div class="price">$200.00</div>
                                    <div class="star">
                                        <img src="images/content/star.png" alt=""/>
                                        <img src="images/content/star.png" alt="" />
                                        <img src="images/content/star.png" alt="" />
                                        <img src="images/content/star.png" alt="" />
                                    </div>
                                    <div class="clear"></div>
                                </li>
                                <li>
                                    <img src="images/content/product/small-img3.jpg" alt="" class="alignleft imgborder" />
                                    <h3><a href="product-details.html">Smart Camera SLR</a></h3>
                                    <div class="price">$120.00</div>
                                    <div class="star">
                                        <img src="images/content/star.png" alt=""/>
                                        <img src="images/content/star.png" alt="" />
                                        <img src="images/content/star.png" alt="" />
                                        <img src="images/content/star.png" alt="" />
                                    </div>
                                    <div class="clear"></div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </aside>
                                
                <div class="clear"></div><!-- clear float --> 
            </section>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
        
		<!-- FOOTER SIDEBAR -->
        <div id="outerfootersidebar">
        	<div class="container">
                <div id="footersidebarcontainer" class="twelve columns"> 
                    <footer id="footersidebar">
                    <div id="footcol1"  class="three columns alpha">
                    	<ul>
                          	<li class="widget-container">
                            <h2 class="widget-title">Recent Post</h2>
                            <ul class="ts-recent-post-widget">
                            	<li>
                                	<img src="images/content/rp1.jpg" alt="">
                                    <h3><a href="#">Page Title</a></h3>
                                    <span>Pellentesque ac ante arcu. Mauris quis nunc et.</span>
                                    <div class="clear"></div>
                                </li>
                            	<li>
                                	<img src="images/content/rp2.jpg" alt="">
                                    <h3><a href="#">Page Title</a></h3>
                                    <span>Pellentesque ac ante arcu. Mauris quis nunc et.</span>
                                    <div class="clear"></div>
                                </li>
                            	<li>
                                	<img src="images/content/rp3.jpg" alt="">
                                    <h3><a href="#">Page Title</a></h3>
                                    <span>Pellentesque ac ante arcu. Mauris quis nunc et.</span>
                                    <div class="clear"></div>
                                </li>
                            </ul>
                            </li>
                    	</ul>
                    </div>
                    <div id="footcol2"  class="three columns">
                        <ul>
                          	<li class="widget-container">
                            	<h2 class="widget-title">Latest Tweet</h2>
                            	<div id='userandquery' class="query"></div>
                            </li>
                        </ul>
                    </div>
                    <div id="footcol3"  class="three columns">
                        <ul>
                            <li class="widget-container">
                                <h2 class="widget-title">Our Gallery</h2>
                                <div class="gallery-pic">
                                	<a href="#"><img src="images/content/small-g1.jpg" alt=""></a>
                                    <a href="#"><img src="images/content/small-g2.jpg" alt=""></a>
                                    <a href="#"><img src="images/content/small-g3.jpg" alt=""></a>
                                    <a href="#"><img src="images/content/small-g4.jpg" alt="" class="nomargin"></a>
                                    <a href="#"><img src="images/content/small-g5.jpg" alt=""></a>
                                    <a href="#"><img src="images/content/small-g6.jpg" alt=""></a>
                                    <a href="#"><img src="images/content/small-g7.jpg" alt=""></a>
                                    <a href="#"><img src="images/content/small-g8.jpg" alt="" class="nomargin"></a>
                                </div>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                    <div id="footcol4"  class="three columns omega">
                        <ul>
                            <li class="widget-container">
                                <h2 class="widget-title">SmartShop</h2>
                                <p>Pellentesque ac ante arcu. Mauris quis nunc velit. Praesent hendrerit bibendum libero, vitae fermentum eros bibendum eget. Morbi molestie volutpat elementum. </p>
								<p>Etiam at erat tortor. Etiam vel ipsum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu ligula metus, eu gravida lorem. </p>
                            </li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                    </footer>
                    
                </div>
            </div>
        </div>
        <!-- END FOOTER SIDEBAR -->
        
        <!-- FOOTER -->
        <div id="outerfooter">
        	<div class="container">
        	<div id="footercontainer" class="twelve columns">
            	<footer id="footer">Copyright &copy;2012 SmartShop. All Rights Reserved . Theme design by <a href="../../templatesquare.com/default.htm">TemplateSquare.com</a></footer>
                <ul class="sn">
                    <li><a href="../../pinterest.com/default.htm" title="Pinterest"><span class="icon-img" style="background:url(images/social/pinterest.png)"></span></a></li>
                    <li><a href="../../plus.google.com/default.htm" title="Google Plus"><span class="icon-img" style="background:url(images/social/gplus.png)"></span></a></li>
                    <li><a href="../../facebook.com/default.htm" title="Facebook"><span class="icon-img" style="background:url(images/social/facebook.png)"></span></a></li>
                    <li><a href="../../twitter.com/default.htm" title="Twitter"><span class="icon-img" style="background:url(images/social/twitter.png)"></span></a></li>
                </ul>
            </div>
            </div>
        </div>
        <!-- END FOOTER -->
        
	</div><!-- end bodychild -->
</div><!-- end outercontainer -->

<!-- ////////////////////////////////// -->
<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<!-- jQuery Superfish -->
<script type="text/javascript" src="js/hoverIntent.js"></script> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/supersubs.js"></script>

<!-- jQuery Dropdown Mobile -->
<script type="text/javascript" src="js/tinynav.min.js"></script>

<!-- Custom Script -->
<script type="text/javascript" src="js/custom.js"></script>

<!-- Twitter Script -->
<script type="text/javascript" src="js/jquery.tweet.js" ></script>

<script type="text/javascript">

jQuery(document).ready(function() {
	//Twitter
	jQuery("#userandquery").tweet({
	  count: 2,
	  username: "templatesquare",
	  loading_text: "searching twitter..."
	});
});
</script>	

<!-- Demo Switcher -->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>

</body>
</html>
